<!--
 * @Description: 产品详情新建，修改弹窗
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-10 11:31:25
 * @LastEditors: 黄勇
 -->
<template>
    <AppDialog
        :isShowDialog="true"
        width="745px"
        title="服务分类配置"
        @confirm="$emit('confirm')"
        @close="$emit('close')"
        :isShowCancelBtn="false"
        class="clean-el-dialog__body"
    >
        <div class="product-detail">
            <div class="product-detail__content">
                <div style="margin-bottom: 20px;">
                    <el-button
                        type="primary"
                        @click="showOneDialog(true)"
                    >
                        <app-icon iconName="vcloud-btn-add"></app-icon>
                        添加一级分类
                    </el-button>
                    <el-button
                        type="primary"
                        @click="showOneDialog(true, true)"
                    >
                        <app-icon iconName="vcloud-bianji"></app-icon>
                        修改一级分类
                    </el-button>
                    <el-button
                        type="plain"
                        @click="deleteCategoryOneConfirm"
                    >
                        <app-icon iconName="vcloud-shanchu"></app-icon>
                        删除一级分类
                    </el-button>
                </div>

                <el-table
                    ref="singleCheck"
                    :data="categoryList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :max-height="320"
                    highlight-current-row
                    header-row-class-name="header-row"
                    @select="(selection, row) => handleRowClick(row)"
                    @row-click="handleRowClick"
                >
                    <el-table-column
                        type="selection"
                        width="60"
                    ></el-table-column>
                    <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                    ></el-table-column>
                     <el-table-column
                        prop="productDictValue"
                        label="产品线"
                        width="60"
                    ></el-table-column>
                    <el-table-column
                        prop="name"
                        label="一级分类"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="child.name"
                        label="二级分类"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="操作"
                        width="330px"
                    >
                        <template slot-scope="scope">
                            <span
                                class="cursor-pointer"
                                style="color: #507ff8;margin-right: 16px;"
                                @click.stop="showTwoDialog(true, false, scope.row)"
                            >
                                添加二级分类
                            </span>
                            <span
                                v-if="scope.row.child && scope.row.child.id"
                                class="cursor-pointer"
                                style="color: #507ff8;margin-right: 16px;"
                                @click.stop="showTwoDialog(true, true, scope.row)"
                            >修改二级分类</span>
                            <span
                                v-if="scope.row.child && scope.row.child.id"
                                class="cursor-pointer"
                                style="color: #507ff8;"
                                @click.stop="deleteCategoryTwoConfirm(scope.row)"
                            >删除二级分类</span>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <AppDialog
            :isShowDialog="isShowOneDialog"
            :append-to-body="true"
            width="500px"
            :title="isModifyCategoryOne ? '添加':'修改' + '一级分类'"
            @confirm="saveCategoryOne"
            @close="showOneDialog(false)"
        >
            <div class="product-modify">
                <div class="product-modify__item">
                    <label class="product-modify__label">产品线:</label>
                    <el-input
                        v-model="productLine.value"
                        disabled
                        placeholder="请输入内容"
                    ></el-input>
                </div>
                <div class="product-modify__item">
                    <label class="product-modify__label">一级分类名称:</label>
                    <el-input
                        v-model="categoryOne.name"
                        placeholder="请输入内容"
                    ></el-input>
                </div>
            </div>
        </AppDialog>
        <AppDialog
            :isShowDialog="isShowTwoDialog"
            :append-to-body="true"
            width="500px"
            :title="isModifyCategoryTwo ? '添加':'修改' + '二级分类'"
            @confirm="saveCategoryTwo"
            @close="showTwoDialog(false)"
        >
            <div class="product-modify">
                <div class="product-modify__item">
                    <label class="product-modify__label">产品线:</label>
                    <el-input
                        v-model="productLine.value"
                        disabled
                        placeholder="请输入内容"
                    ></el-input>
                </div>

                <div class="product-modify__item">
                    <label class="product-modify__label">一级分类名称:</label>
                    <el-input
                        v-model="categoryTwo.categoryOneName"
                        disabled
                        placeholder="请输入内容"
                    ></el-input>
                </div>

                <div class="product-modify__item">
                    <label class="product-modify__label">二级分类名称:</label>
                    <el-input
                        v-model="categoryTwo.name"
                        placeholder="请输入内容"
                    ></el-input>
                </div>
            </div>
        </AppDialog>
    </AppDialog>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
export default {
    name: "category",
    components: {
        AppDialog
    },
    props: {},
    computed: {},
    data: () => ({
        isShowOneDialog: false,
        isModifyCategoryOne: false,
        isShowTwoDialog: false,
        isModifyCategoryTwo: false,
        categoryOne: {},
        categoryTwo: {},
        productLine: {},
        categoryList: [],
        checkedCategory: {} // 表格中选中的分类
    }),
    created() {
        this.getProductLine();
        this.getCategoryList();
    },
    mounted() {},
    watch: {},
    methods: {
        // 获取产品线列表
        getProductLine() {
            this.api
                .getProductLine({}, { method: "get" })
                .then(res => {
                    let data = res.data;
                    // 写死， A6
                    this.productLine = data[0] || {};
                })
                .catch(err => {});
        },
        // 获取产品分类列表
        getCategoryList() {
            this.api
                .getCategoryList({}, { method: "get" })
                .then(res => {
                    let data = res.data;
                    let list = data.records || [];
                    let result = [];
                    list.forEach(item => {
                        if (item.children && item.children.length) {
                            item.children.forEach(child => {
                                result.push(
                                    Object.assign({}, item, {
                                        child: child
                                    })
                                );
                            });
                        } else {
                            result.push(item);
                        }
                    });
                    this.categoryList = result;
                })
                .catch(err => {});
        },
        // 重置数据
        resetCategoryData() {
            this.categoryOne = {};
            this.isModifyCategoryOne = false;
            this.categoryTwo = {};
            this.isModifyCategoryTwo = false;
        },
        showOneDialog(value, isModify = false) {
            // 关闭弹窗， 清除数据
            if (!value) {
                this.resetCategoryData();
            } else if (isModify) {
                // 修改
                if (!(this.checkedCategory && this.checkedCategory.id)) {
                    this.$message({
                        showClose: true,
                        message: "请先选中要修改的分类",
                        type: "warning"
                    });
                    return;
                } else {
                    this.categoryOne = {
                        productLine: this.checkedCategory.productDictValue,
                        name: this.checkedCategory.name
                    };
                }
                this.isModifyCategoryOne = true;
            } else {
                // 新增
                this.categoryOne = {
                    productLine: this.productLine.value,
                    name: ""
                };
            }
            this.isShowOneDialog = value;
        },
        showTwoDialog(value, isModify = false, data) {
            // 关闭弹窗， 清除数据
            if (!value) {
                this.resetCategoryData();
            } else if (isModify) {
                // 修改
                this.categoryTwo = {
                    productLine: data.productDictValue,
                    name: data.child.name,
                    categoryOneName: data.name
                };
                this.isModifyCategoryTwo = true;
            } else {
                // 新增
                this.categoryTwo = {
                    productLine: this.productLine.value,
                    name: "",
                    categoryOneName: data.name
                };
            }
            this.checkedCategory = data;
            this.isShowTwoDialog = value;
        },
        // 可取消选中的单选
        handleRowClick(row) {
            this.$refs.singleCheck.clearSelection();
            if (
                this.checkedCategory &&
                this.checkedCategory.id === row.id &&
                this.checkedCategory.child === row.child
            ) {
                this.checkedCategory = {};
                this.$refs.singleCheck.setCurrentRow();
            } else {
                this.checkedCategory = row;
                this.$refs.singleCheck.setCurrentRow(row);
                this.$refs.singleCheck.toggleRowSelection(row);
            }
        },
        // 添加，修改 保存一级分类
        saveCategoryOne() {
            if (!this.categoryOne.name) {
                this.$message({
                    showClose: true,
                    message: "请输入一级分类名称",
                    type: "warning"
                });
                return;
            }
            if (this.isModifyCategoryOne) {
                this.updateCategory();
            } else {
                this.addCategory();
            }
        },
        addCategory() {
            this.api
                .addCategory({
                    name: this.categoryOne.name,
                    productDictId: this.productLine.id
                })
                .then(res => {
                    this.showOneDialog(false);
                    this.getCategoryList();
                })
                .catch(err => {});
        },
        updateCategory() {
            this.api
                .updateCategory({
                    name: this.categoryOne.name,
                    productDictId: this.productLine.id,
                    id: this.checkedCategory.id
                })
                .then(res => {
                    this.showOneDialog(false);
                    this.getCategoryList();
                })
                .catch(err => {});
        },
        saveCategoryTwo() {
            if (!this.categoryTwo.name) {
                this.$message({
                    showClose: true,
                    message: "请输入二级分类名称",
                    type: "warning"
                });
                return;
            }
            if (this.isModifyCategoryTwo) {
                this.updateCategoryTwo();
            } else {
                this.addCategoryTwo();
            }
        },
        addCategoryTwo() {
            this.api
                .addCategory({
                    name: this.categoryTwo.name,
                    productDictId: this.productLine.id,
                    parentId: this.checkedCategory.id
                })
                .then(res => {
                    this.showTwoDialog(false);
                    this.getCategoryList();
                })
                .catch(err => {});
        },
        updateCategoryTwo() {
            this.api
                .updateCategory({
                    name: this.categoryTwo.name,
                    productDictId: this.productLine.id,
                    id: this.checkedCategory.child.id,
                    parentId: this.checkedCategory.id
                })
                .then(res => {
                    this.showTwoDialog(false);
                    this.getCategoryList();
                })
                .catch(err => {});
        },
        // 确认删除一级分类
        deleteCategoryOneConfirm() {
            if (!this.checkedCategory.id) {
                this.$message({
                    showClose: true,
                    message: "请先选中要删除的分类",
                    type: "warning"
                });
                return;
            }
            this.$confirm(
                `确认要删除一级分类${this.checkedCategory.name}吗？`,
                "",
                {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消"
                }
            )
                .then(() => {
                    this.deleteCategoryOne();
                })
                .catch(() => {});
        },
        // 删除一级分类
        deleteCategoryOne() {
            this.api
                .deleteCategory(
                    {
                        id: this.checkedCategory.id
                    },
                    {
                        customMessage: true
                    }
                )
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        });
                        this.getCategoryList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: "删除失败",
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        showClose: true,
                        message: "删除失败",
                        type: "error"
                    });
                });
        },

        // 确认删除一级分类
        deleteCategoryTwoConfirm(data) {
            this.$confirm(`确认要删除二级分类${data.child.name}吗？`, "", {
                confirmButtonText: "确认",
                cancelButtonText: "取消"
            })
                .then(() => {
                    this.deleteCategoryTwo(data.child.id);
                })
                .catch(() => {});
        },
        // 删除一级分类
        deleteCategoryTwo(id) {
            this.api
                .deleteCategory(
                    {
                        id: id
                    },
                    {
                        customMessage: true
                    }
                )
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        });
                        this.getCategoryList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: "删除失败",
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        showClose: true,
                        message: "删除失败",
                        type: "error"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped src="../../../assets/styles/product/dialog.scss"></style>
<style lang="scss">
.product-plugin {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    .product-plugin__header {
        width: 100%;
        height: 40px;
        background: #f1f3f7;
        line-height: 30px;
        padding: 4px 10px 0;
        box-sizing: border-box;
    }
    .product-plugin__left,
    .product-plugin__right {
        flex: 0 0 45%;
        height: 300px;
        border: 1px solid #eaeef6;
    }
    .product-plugin__center {
        flex: 0 0 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .product-plugin__btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #507ff8;
        text-align: center;
        line-height: 32px;
        color: #fff;
        opacity: 0.12;
        &:first-child {
            opacity: 1;
            background-color: #507ff8;
            margin-bottom: 20px;
        }
    }
    .product-plugin__content {
        width: 100%;
        height: 260px;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .product-plugin__item {
        width: 100%;
        height: 30px;
        padding: 0 10px;
        line-height: 30px;
        margin-top: 2px;
        &.checked {
            background-color: #507ff8;
            color: #fff;
        }
        &:hover {
            background-color: #507ff8;
            color: #fff;
        }
    }
}

.product-modify {
    padding: 0 40px;
    .product-modify__item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        &:first-child {
            margin-top: 0;
        }
    }
    .product-modify__label {
        flex: 0 0 60px;
        margin-right: 20px;
    }
}
</style>